<template>
  <div class="home-container">
    <!-- 头部Banner -->
    <div class="banner">
      <div class="banner-content">
        <h1>欢迎来到我的个人作品展示</h1>
        <p>餐饮设计 / 室内效果图 / 施工图设计</p>
        <el-button type="primary" size="medium" @click="$router.push('/works')">
          浏览作品集 <i class="el-icon-arrow-right"></i>
        </el-button>
      </div>
    </div>

    <!-- 最新作品展示 -->
    <div class="section content-card">
      <h2>最新作品</h2>
      <!-- 加载状态 -->
      <div v-if="loading" class="loading-container">
        <el-skeleton :rows="3" animated />
      </div>

      <!-- 空数据状态 -->
      <el-empty
        v-else-if="!latestWorks.length"
        description="暂无作品数据"
      >
      </el-empty>

      <el-row :gutter="20" v-else>
        <el-col :span="8" v-for="(work, index) in latestWorks" :key="index">
          <el-card :body-style="{ padding: '0px' }" shadow="hover">
            <img 
              :src="work.image" 
              :onerror="defaultImg"
              class="work-image"
            >
            <div style="padding: 14px;">
              <h3>{{ work.title }}</h3>
              <p>{{ work.description }}</p>
              <div class="work-footer">
                <span class="date">{{ work.date }}</span>
                <el-button type="text" @click="$router.push('/works')">
                  查看详情 <i class="el-icon-arrow-right"></i>
                </el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 个人简介 -->
    <div class="section content-card introduction">
      <el-row :gutter="40">
        <el-col :span="12">
          <h2>关于我</h2>
          <p>{{ introduction }}</p>
          <div class="social-links">
            <el-button type="primary" icon="el-icon-message" circle></el-button>
            <el-button type="success" icon="el-icon-phone" circle></el-button>
            <el-button type="warning" icon="el-icon-star-off" circle></el-button>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="skill-overview">
            <h3>专业技能</h3>
            <div class="skill-header">
              <el-button type="primary" plain @click="$router.push('/skills')">查看技能详情</el-button>
            </div>
            <ul class="skill-list">
              <li v-for="(skill, index) in mainSkills" :key="index" class="skill-item">
                <span class="skill-name">{{ skill.name }}</span>
                <span class="skill-level" :class="skill.level">{{ skill.proficiency }}</span>
              </li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { getMngList } from '@/api/works'
import defaultWorkImg from '@/assets/work-default.png'

export default {
  name: 'HomeView',
  data() {
    return {
      latestWorks: [],
      loading: false,
      defaultImg: 'this.src="' + defaultWorkImg + '"',
      introduction: '我是一名专业的餐饮空间设计师，拥有多年的设计经验。专注于为客户提供高质量的餐饮空间设计解决方案，包括效果图制作、施工图设计等服务。',
      mainSkills: [
        { name: '室内设计', proficiency: '精通', level: 'expert' },
        { name: '效果图制作', proficiency: '熟练', level: 'proficient' },
        { name: '施工图设计', proficiency: '精通', level: 'expert' },
        { name: '3D建模', proficiency: '熟悉', level: 'familiar' },
        { name: '空间规划', proficiency: '精通', level: 'expert' }
      ],
      defaultWorks: [
        {
          title: '示例作品1',
          description: '这是一个示例作品描述',
          image: defaultWorkImg,
          date: '2024-01-20'
        },
        {
          title: '示例作品2',
          description: '这是一个示例作品描述',
          image: defaultWorkImg,
          date: '2024-01-19'
        },
        {
          title: '示例作品3',
          description: '这是一个示例作品描述',
          image: defaultWorkImg,
          date: '2024-01-18'
        }
      ]
    }
  },
  created() {
    this.getLatestWorks()
  },
  methods: {
    async getLatestWorks() {
      this.loading = true
      try {
        const res = await getMngList({ pageNum: 1, pageSize: 3 })
        if (res.code === 200) {
          this.latestWorks = res.rows.map(item => ({
            title: item.mngName,
            description: item.mngDesc,
            image: item.mngUrl,
            date: item.createTime
          }))
        } else {
          this.latestWorks = this.defaultWorks
        }
      } catch (error) {
        console.error('获取最新作品失败:', error)
        this.latestWorks = this.defaultWorks
        this.$message.error('获取最新作品失败，显示默认数据')
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style scoped>
.home-container {
  width: 100%;
}

.banner {
  text-align: center;
  padding: 100px 20px;
  background: linear-gradient(135deg, #e0eafc 0%, #cfdef3 100%);
  color: white;
  margin-bottom: 40px;
  position: relative;
  overflow: hidden;
}

.banner-content {
  position: relative;
  z-index: 1;
  color: #2c3e50;
}

.banner h1 {
  font-size: 2.5em;
  margin-bottom: 20px;
  font-weight: 600;
}

.content-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  padding: 30px;
}

.section {
  padding: 40px 20px;
  max-width: 1200px;
  margin: 0 auto;
  margin-bottom: 40px;
}

.section h2 {
  text-align: center;
  margin-bottom: 30px;
  color: #2c3e50;
}

.work-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 8px 8px 0 0;
}

.work-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #eee;
}

.date {
  color: #909399;
  font-size: 13px;
}

.introduction {
  margin-top: 40px;
}

.social-links {
  margin-top: 20px;
}

.social-links .el-button {
  margin-right: 10px;
}

.skill-overview {
  padding: 0 20px;
}

.skill-overview h3 {
  margin-bottom: 20px;
  color: #2c3e50;
  font-size: 1.5em;
}

.skill-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.skill-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #ebeef5;
}

.skill-name {
  font-size: 16px;
  color: #303133;
}

.skill-level {
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 14px;
}

.skill-level.expert {
  background-color: #f0f9eb;
  color: #67c23a;
}

.skill-level.proficient {
  background-color: #ecf5ff;
  color: #409eff;
}

.skill-level.familiar {
  background-color: #f4f4f5;
  color: #909399;
}

.loading-container {
  padding: 40px;
}

.skill-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}
</style> 